<template>
  <div>
    <el-button type="primary" icon="el-icon-circle-plus" @click="add()">添加用户</el-button>
    <el-table
      :data="user"
      stripe
      border
      style="width: 100%;margin-top: 10px">
      <el-table-column
        label="身份证"
        align="center"
        prop="identityCard">
      </el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        prop="name">
      </el-table-column>
      <el-table-column
        label="是否是管理员"
        align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isAdmin == true">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button round
                     @click="handleCheck(scope.$index, scope.row)" plain size="mini">详 情
          </el-button>
          <el-button round
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)" plain size="mini">删 除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 10px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>

    <el-dialog :title="title" @close='closeDialog' :visible.sync="showUserMsg">
      <el-form
        size="mini"
        :model="itemMsg" label-width="120px" >
        <el-form-item label="员工姓名:">
          <el-input  v-model="itemMsg.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证:" oninput="this.value=this.value.replace(/([^0-9Xx])+/g,'');">
          <el-input  v-model="itemMsg.identityCard"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUserMsg = false">取 消</el-button>
        <el-button type="primary" @click="updateMsg()" v-if="type == 0">修 改</el-button>
        <el-button type="primary" @click="addMsg()" v-else>增 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {userList,userSave,userUpdate,userDelete} from '../../axios/api'
    export default {
        name: "user",
        data(){
            return{
                showUserMsg:false,
                title:"用户详情",
                user:[],
                total:0,
                type:0,//0为修改，1为增加
                itemMsg:{
                    id:0,
                    isAdmin:false,
                    identityCard:"",
                    name:""
                },
                page:1
            }
        },
        mounted() {
            this.getMSG(1,10);
        },
        methods:{
            getMSG:async function(page,limit){
                let data = {
                    page:page,
                    limit:limit,
                    is_admin:false
                };
                let res = await userList(data);
                if (res.code === 0){
                    this.user = res.data.list;
                    this.total = res.data.totalCount;
                }
            },
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteMsg(row.id)
                }).catch(() => {

                });
            },
            handleCurrentChange(index){
                this.page = index;
                this.getMSG(index,10)
            },
            handleCheck(index,row){
                this.itemMsg = row;
                this.type = 0;
                this.title = "用户详情";
                this.showUserMsg = true;
            },
            add(){
                this.type = 1;
                this.title = "添加用户";
                this.showUserMsg = true;
            },
            deleteMsg:async function(id){
                let data = {id:id};
                let res = await userDelete(data);
                if (res.code === 0){
                    this.alert("success",'删除成功!');
                    this.getMSG(this.page,10);
                }
            },
            updateMsg:async function(){
                if (this.itemMsg.identityCard === "" || this.itemMsg.name === ""){
                    this.alert("warning","请填完表单！");
                    return;
                }
                let res = await userUpdate(this.itemMsg);
                if (res.code === 0){
                    this.alert("success","修改成功");
                    this.getMSG(this.page,10)
                }
            },
            addMsg:async function(){
                if (this.itemMsg.identityCard === "" || this.itemMsg.name === ""){
                    this.alert("warning","请填完表单！");
                    return;
                }
                let data = {
                    identityCard:this.itemMsg.identityCard,
                    name:this.itemMsg.name,
                    isAdmin:this.itemMsg.isAdmin
                };
                let res = await userSave(data);
                if (res.code === 0){
                    this.alert("success","添加成功");
                    this.getMSG(this.page,10);
                }
            },
            closeDialog(){
                this.itemMsg = {
                    id:0,
                    isAdmin:false,
                    identityCard:"",
                    name:""
                }
            }
        }
    }
</script>

<style scoped>

</style>
